<template>
    <div id="base" class="">
        <!-- 底框1920*1060 -->
        <div id="u0" class="ax_default box_1" data-label="底框1920*1060">
            <div id="u0_div"></div>
        </div>

        <!-- 背景图 -->
        <div id="u1" class="ax_default image">
            <img id="u1_img" class="img" src="@/assets/start/u1.png"  alt=""/>
        </div>

        <div id="u3" class="ax_default image" v-show="false">
            <img id="u3_img" src="@/assets/start/u3.png"  alt=""/>
        </div>

        <div style="margin-top: -10rem">
            <div id="u4" class="ax_default box_1">
                <img id="u4_img" src="@/assets/start/u4.svg"  alt=""/>
            </div>

            <!-- 按钮 -->
            <div id="u5" style="width: 30rem;color: rgb(217, 0, 27);font-size: 3rem;left: 41%" >
                <p>请点击进入各子系统</p>
            </div>

            <!-- 标题 -->
            <div id="u6" class="ax_default _标题_1" >
                <div id="u6_text" class="text" style="margin-top: -8rem">
                    <p style="font-size:80px;">
                        <span style="color:#FFFFFF">智慧供配电技术虚拟仿真系统（WEB版）</span>
                    </p>
                    <div class="select">
                        <button>供配电技术</button>
                        <button>新型电力系统</button>
                        <button>理论习题库（学员端）</button>
                    </div>

                </div>
            </div>


            <!-- 副标题文字 -->
        </div>
        <!-- 装饰框 -->

    </div>

</template>

<script>
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";

export default {
    name: "selectPage",
    components: {ScaleBox},

    methods: {
        start() {
            // 点击开始按钮的逻辑
            console.log("开始被点击");
            this.$router.push("/login");
        }
    }
};
</script>

<style scoped>

@import "~@/assets/axure/axure_rp_page.css";
@import "~@/assets/axure/styles.css";
@import "~@/assets/start/styles.css";


#base {
    position: relative;
}
.select {
    display: flex;
    justify-content: space-between;
    width: 60rem;
    margin: 5rem auto;
    height: 5rem;
    gap: 1rem; /* 按钮之间间距 */
}

.select button {
    flex: 1;                  /* 平分宽度 */
    max-width: 30%;            /* 最大宽度 */
    background-color: #4a90e2; /* 主色调 */
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0 1rem;
}

/* 鼠标悬停 */
.select button:hover {
    background-color: #357ab8;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 点击按下 */
.select button:active {
    background-color: #2a5d91;
    transform: translateY(1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* 移动端适配 */


</style>
